<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>全部评论</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <!--以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="asset/plugins/weui/css/weui.min.css">
    <link rel="stylesheet" href="asset/plugins/jquery-weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="asset/plugins/iconfont/iconfont.css">
    <link rel="stylesheet" href="asset/plugins/dropload/dropload.css">

    <link rel="stylesheet" href="asset/css/p-index.css">
</head>
<body>
<!--内容 开始-->
    <section id="container" class="m-container">
        <div class="weui-panel weui-panel_access weui-panel--comment">
            <div class="weui-panel__hd"><span>用户评论</span><a class="m-panel__hd_link" href="javascript:;" onclick="history.go(-1)"><span>返回</span><i class="iconfont icon-return"></i></a></div>
            <div id="msg_add" class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <!--<p class="g-fs&#45;&#45;12 g-mt&#45;&#45;10 g-c&#45;&#45;gray">2017.06.13 14:00</p>-->
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <!--<p class="g-fs&#45;&#45;12 g-mt&#45;&#45;10 g-c&#45;&#45;gray">2017.06.13 14:00</p>-->
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <!--<p class="g-fs&#45;&#45;12 g-mt&#45;&#45;10 g-c&#45;&#45;gray">2017.06.13 14:00</p>-->
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
            </div>

        </div>

        <!--<div class="m-container_footer"><a href="javascript:;" onclick="history.go(-1)" class="weui-btn weui-btn_orange">返回上一页</a></div>-->
    </section>


<script src="asset/plugins/jquery/jquery-2.1.4.js"></script>
<script src="asset/plugins/jquery-weui/js/jquery-weui.min.js"></script>
<script src="asset/plugins/dropload/dropload.min.js"></script>
<!--p-index.js-->
<!--<script src="asset/js/p-waiter-info.js"></script>-->
<!--<script src="asset/js/m-draw-bar.js"></script>-->
<!--<script src="asset/js/m-grade-stars.js"></script>-->
<script>
$(function () {
    var counter = 0;
    // 每页展示4个
    var num = 3;
    var pageStart = 0,pageEnd = 0;
    $('#container').dropload({
        scrollArea : window,
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">暂无数据</div>'
        },

        //触发dropload的最小滑动距离
        distance: 50,
        //提前加载距离
        //threshold: "",

        loadDownFn : function(me){
            $.ajax({
                type: 'GET',
                url: 'asset/data/data-grade-all.json',
                dataType: 'json',
                success: function(data){
//                    console.log(data.length);
                    var html_add='';
                    counter++;
                    pageEnd = num * counter;
                    pageStart = pageEnd - num;
                    for(var i=pageStart;i<pageEnd;i++){
                        html_add +=`<div class="weui-media-box weui-media-box_appmsg">
                                    <div class="weui-media-box__hd"><img src="${data[i].img_src}" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                                    <div class="weui-media-box__bd">
                                        <h4 class="weui-media-box__title m-comment_name">${data[i].name}：</h4>
                                        <p class="weui-media-box__desc">${data[i].comment}</p>
                                        <ul class="weui-media-box__info">
                                            <li class="weui-media-box__info__meta">${data[i].data}</li>
                                        </ul>
                                    </div>
                                    <div class="m-icon-grade p-icon-grade"><img src="${data[i].img_grade}" alt=""></div>
                                </div>`;
                        console.log("counter:"+counter+"||pageStart:"+pageStart+"||pageEnd:"+pageEnd+"||i:"+i+"||data.length:"+data.length);
                        if((i + 1) >= data.length){
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                            break;
                        }
                    }
                    // 为了测试，延迟1秒加载
//                    setTimeout(function(){
                        $('#msg_add').append(html_add);
                        // 每次数据加载完，必须重置
                        me.resetload();
//                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }

            });
        },
        threshold : 50
    });
});


</script>
</body>
</html>